<template>
  <div>
    <div class="homepage">
      <el-container>
        <el-main>
          <div>
            <el-row>
              <!-- 头像 -->
              <el-col :span="3">
                <el-image
                  style="width: 80px; height: 80px;border-radius: 80px;"
                  src="https://upload.jianshu.io/users/upload_avatars/28127530/e764b461-863a-4e37-a011-9fe97eb8e392.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240"
                ></el-image>
              </el-col>
              <el-col :span="20">
                <p class="nickname">用户名</p>
                <div class="link_box">
                  <!-- 关注 -->
                  <router-link
                    to="/homepage/attention"
                    class="page_link"
                  >
                    <p>0</p>
                    <span class="link_txt">关注 ></span>
                  </router-link>
                  <!-- 粉丝 -->
                  <router-link
                    to="/homepage/fans"
                    class="page_link"
                  >
                    <p>0</p>
                    <span class="link_txt">粉丝 ></span>
                  </router-link>
                  <!-- 文章 -->
                  <router-link
                    to="/homepage/homemessage"
                    class="page_link"
                  >
                    <p>0</p>
                    <span class="link_txt">文章 ></span>
                  </router-link>
                  <div class="page_link">
                    <p>0</p>
                    <span class="link_txt">字数</span>
                  </div>
                  <div style="padding-left:0.3rem">
                    <p>0</p>
                    <span class="link_txt">收获喜欢</span>
                  </div>
                </div>
              </el-col>
            </el-row>
            <!-- 子路由 -->
            <div class="children">
              <router-view></router-view>
            </div>
          </div>
        </el-main>
        <el-aside width="300px">
          <div class="aside">
            <p style="padding:1rem 0px">
              <router-link
                to="/homepage/attentiontopic"
                class="aside_link"
              ><i class="el-icon-menu"></i> 我关注的专题/文集/连载</router-link>
            </p>
            <p style="padding:1rem 0px">
              <router-link
                to="/homepage/favoritearticle"
                class="aside_link"
              ><i class="iconfont icon-xihuan "></i> 我喜欢的文档</router-link>
            </p>
          </div>
        </el-aside>
      </el-container>
    </div>
  </div>
</template>

<script>
export default {
  name: "homepage",
};
</script>

<style scoped>
.homepage {
  width: 66%;
  margin: 0 auto;
  margin-top: 5rem;
}
.nickname {
  font-weight: bold;
  font-size: 1.2rem;
  padding-bottom: 0.7rem;
}
.link_box {
  display: flex;
}
.page_link {
  width: 4rem;
  text-decoration: none;
  color: black;
  border-right: 1px solid #cccccc;
  padding-left: 0.3rem;
}
.link_txt {
  color: #999999;
  font-size: 13px;
}
.children {
  margin-top: 1rem;
}
.aside {
  border-top: 1px solid #cccc;
  border-bottom: 1px solid #cccc;
}
.aside_link {
  text-decoration: none;
  color: black;
}
</style>